// @ts-nocheck
import React, { useEffect, useState } from "react";
import { Button, DatePicker, NavBar } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import "./index.less";
import { getCurrentUserInfo } from "@/utils/authority";
import { monthlyReportList, getMyWork } from "../service";
import moment from "moment";
import { DownOutline } from "antd-mobile-icons";

const ServiceMonthly: React.FC<any> = () => {
  const navigate = useNavigate();
  const userId = getCurrentUserInfo()?.data?.id;

  const [list, setList] = useState<any>([]);
  const [statisticsData, setStatisticsData] = useState<any>({});
  const [curMonth, setCutMonth] = useState(moment().format("YYYY年MM月"));
  const [monthSel, setMonthSel] = useState();
  const getListData = async () => {
    const params = {
      userId: userId,
    };
    try {
      const { data } = await monthlyReportList(params);
      setList(data?.data || []);
      setStatisticsData(data || {});
    } catch {}
  };

  useEffect(() => {
    getListData();
  }, []);

  return (
    <div className="monthly-contarnier">
      <div className="header">
        <div>
          <NavBar onBack={() => navigate("/user")}>
            <div className="commontitle">服务月报</div>
          </NavBar>
        </div>
        <div className="monthly_change">
          <Button color="default" fill="none" onClick={() => setMonthSel(true)}>
            {curMonth}
            <DownOutline fontSize={30} />
          </Button>
          <DatePicker
            visible={monthSel}
            onClose={() => setMonthSel(false)}
            precision="month"
            onConfirm={(val) => {
              setCutMonth(moment(val).format("YYYY年MM月"));
            }}
            style={{
              "--title-font-size": "30px",
              "--header-button-font-size": "30px",
              "--item-font-size": "30px",
              "--item-height": "60px",
            }}
          />
        </div>
      </div>
      <div className="monthly-box">
        <div className="monthly-box-top">
          <div className="monthly-box-top-card">
            <div>本月完成</div>
            <div>
              {Array.isArray(statisticsData?.data)
                ? statisticsData?.data.length
                : 0}
            </div>
          </div>
          <div className="monthly-box-top-card">
            <div>满意度</div>
            <div>{statisticsData?.satisfaction || 0}%</div>
          </div>
        </div>
        <p className="monthly-box-title">服务明细</p>
        {list.map((item: any) => (
          <div className="monthly-box-card" key={item.id}>
            <div className="monthly-box-card-title">{item?.title}</div>
            <div className="monthly-box-card-type">
              <span>{item?.questiontitle}</span>
              <span>{item?.eventType}</span>
            </div>
            <div className="monthly-box-card-time">{item?.time}</div>
            <div className={item?.score ? "ycl" : "dcl"}>
              {item?.score ? "好评" : "未评价"}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default ServiceMonthly;
